<template>
  <div class="content contentOrder">
    <div class="mainView">
      <div class="tab flexb">
        <el-tabs v-model="activeName" class="tabList" @tab-click="handleSearchReset">
          <el-tab-pane name="current" v-if="processingUnReadCount !== 0">
            <span slot="label" style="position: relative;">
              {{ $t('jy.dqweituo') }}
              <i class="redDotIcon"></i>
              <span class="orderNum rightDiff" v-if="$store.state.app.scatter.chain==='eos'
              && orderRows.order">({{orderRows.order}})</span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="current" v-else>
            <span slot="label" style="position: relative;">
              {{ $t('jy.dqweituo') }}
              <span class="orderNum" v-if="$store.state.app.scatter.chain==='eos'
              && orderRows.order">({{orderRows.order}})</span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="history" style="padding-right: 10px;" v-if="historyUnReadCount !== 0">
            <span slot="label" style="position: relative;">
              {{ $t('jy.lsweituo') }}
              <i class="redDotIcon"></i>
            </span>
          </el-tab-pane>
          <el-tab-pane name="history" v-else>
            <span slot="label" style="position: relative;">
              {{ $t('jy.lsweituo') }}
            </span>
          </el-tab-pane>
        </el-tabs>
        <div class="tabRight">
          <div class="remind"
            v-if="!tipRemindHide && $store.state.app.accountInfo && !$store.state.app.accountInfo.isDealRemind && $appName === 'eosNewdex'">
            <div class="toRemind" @click="handleJumpRemind">
              {{$t('ndxStake.remindTip1')}}
            </div>
            <i class="iconfont el-icon-close" @click="handleCloseRemind"></i>
          </div>
          <div class="unReadOrder" v-if="unReadCount" @click="handleUpdateOrderIsReaded">
            <span class="redDot"></span>
            <i class="iconfont icon-huaban1"></i>
            <span>{{$t('order.unRead')}}{{ unReadCount }}</span>
          </div>
        </div>
      </div>
      <search-head
      :form-dataget="formData"
      :active-name="activeName"
      :resetData="resetData"
      :orderRows="orderRows"
      :hasDataForTable="hasDataForTable"
      @ListenSearchHead="ListenSearchHead"/>
      <orders-current
      :form-dataget="formData"
      @ListenCurrentOrder="ListenCurrentOrder"
      v-if="activeName === 'current'" />
      <orders-history
      :form-dataget="formData"
      @ListenHistoryOrder="ListenHistoryOrder"
      v-if="activeName === 'history'" />
    </div>
  </div>
</template>

<script>
// 订单中心 组件
import { EosModel } from '@/utils/eos';
import SearchHead from '@/components/orders/SearchHead';
import OrdersCurrent from '@/components/orders/Current';
import OrdersHistory from '@/components/orders/History';
import { getUrlParams } from '@/utils/validate';

export default {
  name: 'OrderCenter',
  components: {
    SearchHead,
    OrdersCurrent,
    OrdersHistory
  },
  data() {
    return {
      activeName: 'current', // history
      formData: {},
      unReadCount: 0, // 未读订单个数
      tipRemindHistory: {}, // 提示开通成交提醒
      tipRemindHide: true, // 是否显示成交提醒
      processingUnReadCount: 0, // 有无当前委托
      historyUnReadCount: 0, // 有无历史委托
      hasDataForTable: 0, // 历史订单数
      resetData: 0, // 时间重置
      orderRows: {
        order: 0,
        amount: 200
      },
    };
  },
  watch: {
  },
  computed: {
  },
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    // 重置搜索条件
    this.handleSearchReset();
    // 跳转到历史委托
    const href = window.location.href;
    const urlparams = getUrlParams(href);
    if (urlparams && urlparams.way === 'history') {
      this.activeName = 'history';
      this.formData.historyType = 2;
    }
    // 开通成交提醒提示
    const tipRemindHistory = localStorage.getItem('tipRemindHistory');
    const accountName = this.$store.state.app.scatter.identity.accounts[0].name;
    this.tipRemindHistory = tipRemindHistory ? JSON.parse(tipRemindHistory) : {};
    if (this.tipRemindHistory[accountName]) {
      this.tipRemindHide = true;
    } else {
      this.tipRemindHide = false;
    }
    // 获取订单最大数量
    this.handleGetTableRowsForOrders();
    // 获取未读订单个数
    this.handleUnreadOrder();
    // 判断当前委托数量
    this.handleProcessingUnreadOrder();
    // 判断历史委托数量
    this.handleHistoryUnreadOrder();
    this.$set(this.formData, 'timerUpdate', new Date().getTime());
  },
  beforeDestroy() {
  },
  methods: {
    // 重置搜索条件
    handleSearchReset() {
      const historyType = this.formData.historyType || 0
      this.formData = {
        currPage: 1, // 当前页码
        pageSize: 10,
        coinCode: '', // 币种Id
        direction: '', // 方向
        status: '', // 选中值
        orderStatus: '', // 订单状态
        orderByName: 'update_ts',
        orderByType: 'desc',
        valuationCoinCode: 0, // 币种类型
        dealStatus: '', // 成交状态
        historyType, // 历史订单类型：0-近3个月订单；1-2018年订单；2-2019年订单
        hidOtherKey: false, // 隐藏其他交易对
        hideCancelOrder: 1, // 隐藏已撤销订单
        hidRevokeOrder: true, // 隐藏已撤销订单
        symbolId: null, // 交易对id
        beginDate: '', // 开始时间
        endDate: '', // 结束时间
      }
      this.resetData = new Date().getTime();
      this.$set(this.formData, 'timerUpdate', new Date().getTime());
    },
    // 搜索信息
    ListenSearchHead(key, val) {
      if (key === 'form') {
        this.formData = val;
        // this.formData.timerUpdate = new Date().getTime();
        this.$set(this.formData, 'timerUpdate', new Date().getTime());
      }
    },
    // 获取当前委托个数
    handleProcessingUnreadOrder() {
      this.$http.get('/order/getProcessingUnReadCount').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.processingUnReadCount = res.unReadCount;
      });
    },
    // 获取历史委托个数
    handleHistoryUnreadOrder() {
      this.$http.get('/order/getHistoryUnReadCount').then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.historyUnReadCount = res.unReadCount;
      });
    },
    // 获取未读订单个数
    handleUnreadOrder() {
      this.$http.get('/order/getUnReadCount').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.unReadCount = res.unReadCount;
        this.$store.dispatch('setBadge', res.unReadCount);
      });
    },
    // 更新全部订单为已读状态
    handleUpdateOrderIsReaded() {
      const updateParams = {
        orderId: ''
      };
      this.$http.post('/order/updateOrderIsReaded', updateParams).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.unReadCount = 0;
        this.$store.dispatch('setBadge', 0);
        this.$set(this.formData, 'timerUpdate', new Date().getTime());
        this.handleProcessingUnreadOrder();
        this.handleHistoryUnreadOrder();
      });
    },
    // 跳转到成交提醒
    handleJumpRemind() {
      this.$router.push({ name: 'services' });
    },
    // 关闭成交提醒
    handleCloseRemind() {
      this.tipRemindHide = true;
      const accountName = this.$store.state.app.scatter.identity.accounts[0].name;
      this.tipRemindHistory[accountName] = 1;
      localStorage.setItem('tipRemindHistory', JSON.stringify(this.tipRemindHistory));
    },

    // 当前委托订单监听
    ListenCurrentOrder(key) {
      if (key === 'orderUpdate') { // 更新未读数
        // 获取未读订单个数
        this.handleUnreadOrder();
        // 判断当前委托数量
        this.handleProcessingUnreadOrder();
        // 获取前委托数量
        this.handleGetTableRowsForOrders();
      }
    },
    // 历史订单监听
    ListenHistoryOrder(key, val) {
      if (key === 'orderUpdate') { // 更新未读数
        // 获取未读订单个数
        this.handleUnreadOrder();
        // 判断历史委托数量
        this.handleHistoryUnreadOrder();
      }
      if (key === 'orderPage') {
        this.hasDataForTable = val;
      }
    },

    // 获取订单数量
    handleGetTableRowsForOrders() {
      EosModel.getTableRowsForOrders((res) => {
        if (res && res.rows && res.rows.length > 0) {
          this.orderRows = res.rows[0];
          const ext1 = res.rows[0].ext1;
          this.orderRows.amount = ext1 >= 0 && ext1 <= 200 ? 200 : ext1;
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/variables.scss';
.colorThis {
  color: $-main-color !important;
}
.content{
  .mainView{
    width: $-min-width;
    margin: auto;
    padding: 20px 0px;

    .tab {
      background: #fff;
      padding: 5px 20px 0 20px;
    }
    .tabList {
      .redDotIcon {
        position: absolute;
        right: -5px;
        top: -5px;
        display: inline-block;
        width: 6px;
        height: 6px;
        background: red;
        border-radius: 50%;
      }
      .orderNum {
        position: absolute;
        right: -26px;
        top: -11px;
        color: #999;
        font-size: 12px;
        &.rightDiff {
          right: -30px;
        }
      }
    }
    .unReadOrder {
      display: inline-block;
      margin-left: 10px;
      cursor: pointer;

      .redDot {
        display: inline-block;
        width: 5px;
        height: 5px;
        background: #E51C23;
        border-radius: 50%;
        margin-bottom: 2px;
      }
    }

    .remind {
      display: inline-block;
      color: #278EDA;
      margin-left: 10px;

      .toRemind {
        display: inline-block;
        cursor: pointer;
      }

      .icon-renzhengyouxiang {
        display: inline-block;
        font-size: 20px;
        width: 20px;
        height: 15px;
        vertical-align: middle;
        margin-top: -7px;
      }

      .el-icon-close {
        vertical-align: middle;
        color: #999;
        font-size: 18px;
        cursor: pointer;
        margin-bottom: 2px;
      }
    }
  }
}

/deep/ .tabList #tab-history {
  margin-right: 25px !important;
}

@media screen and (max-width: 1280px) {
  .mainView {
    width: 1240px;
  }
}

.theme-1B1D27{
  .content{
    .mainView{
      .tab {
        background: #152247;
        .tabList {
          /deep/ .el-tabs__item {
            color: rgba(255, 255, 255, 0.6);
          }
          /deep/ .el-tabs__item.is-active {
            color: #278EDA;
          }
        }
      }
    }
  }
}
</style>
